<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    response.setHeader("cache-control","public");
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <title>考务管理</title>
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/font/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/common.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/examMng/core.css">
    <link rel="stylesheet" href="<%=path%>/static/css/examMng/examMng.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/examMng/exam-org-deta.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/practice/text.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/jstreeview/plugins/bootstrap-dialog/bootstrap-dialog.min.css">

    <style>
        .form-control {
            height: 44px;
        }
        .btn {
            padding: 10px 18px;
        }
    </style>
    <script src="<%=path%>/static/js/respond.js"></script>
    <script src="<%=path%>/static/js/jquery-1.9.1.min.js"></script>
    <script src="<%=path%>/static/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="<%=path%>/static/jstreeview/plugins/bootstrap-dialog/bootstrap-dialog.min.js"></script>
    <script src="<%=path%>/static/js/examMng/right-btn.js"></script>
    <script src="<%=path%>/static/html2image/html2canvas.min.js"></script>
    <script src="<%=path%>/static/html2image/canvas2image.js"></script>
    <script src="<%=path%>/static/js/toImage/saveimg.js"></script>
</head>
<body>

<jsp:include page="../head.jsp" flush="true"/>

<!--head end-->
<span id="toCanvasBtn"></span>
<span id="saveImageBtn"></span>
<!--body begin-->
    <div id="container"  style="width: 900px; margin:20px auto; padding: 10px 20px 10px 20px;">
        <div align="center" style="margin-top:50px;">
            <H1>士兵职业技能鉴定准考证</H1>
        </div>
        <table class="table table-bordered" width="100%" cellpadding="0" cellspacing="0">
            <tr width="100">
                <td align="right" width="120">姓名：</td>
                <td width="150">
                    ${examinee.name}
                </td>
                <td align="right" width="120">身份证号码：</td>
                <td width="200">${examinee.identityId}</td>
                <td rowspan="6" width="20"><div align="center"><img id="pic_face"  height="160" width="120" style="padding:2px 2px 5px; border:1px #ddd solid;"></div>&nbsp;</td>
            </tr>
            <tr>
                <td align="right">性别：</td>
                <td>男&nbsp;</td>
                <td align="right">士兵号：</td>
                <td>${examinee.soldierId}</td>
            </tr>
            <tr>
                <td align="right">职业(工种)：</td>
                <td>舰艇磁场测量员</td>
                <td align="right">鉴定等级</td>
                <td>中级</td>
            </tr>
            <tr>
                <td align="right">理论知识：</td>
                <td >8月28日<BR/>1620-1720</td>

                <td align="right">操作技能:</td>
                <td>8月29日<BR/>0830-1730</td>
            </tr>
            <tr>
                <td align="right">组训答辩:</td>
                <td>2013-08-16<BR/>0830-1730</td>
                <td align="right"></td>
                <td></td>
            </tr>

            <tr>
                <td colspan="4" align="left">注：参加考核人员一律须持本证和士兵证参加考核。</td>
            </tr>
        </table>
        <div>
            <div class="table table-bordered" style="padding: 10px;">
                <div style="line-height:20px;">考 核 须 知</div>
                <div style="line-height:30px;">一、鉴定对象必须携带此证和本人士兵证，着军装，于考前15分钟进入考场，士兵证正在办理的，应出示团（含团）以上单位军务部门证明，考核证件不全或者不符的，不得进入考场。</div>
                <div style="line-height:30px;">二、鉴定对象必须按考场安排对号入座或进入指定工作位置，并将证件放在考桌指定位置。开考30分钟以后，不得进入考场。</div>
                <div style="line-height:30px;">三、理论知识考核不得携带与考核有关的任何资料进入考场，操作技能考核除可带必需的工具外，不得携带违规物品进入考场。</div>
                <div style="line-height:30px;">四、自觉遵守考场规则。考核时严禁使用、操作与考核无关的通信工具或机器按钮。</div>
                <div style="line-height:30px;">五、考核开始30分钟以后方可交卷，退场后不得再进入考场。</div>
                <div style="line-height:30px;">六、严禁将考核发放的各种物品带出考场，违者取消成绩。</div>
                <div style="line-height:30px;">七、妥善保管准考证，以备查分。</div>
            </div>
        </div>
    </div>
<div class="stypebox">
    <div  class=" form-submit floatleft" >

        <div id="stypeback" class="btn btn-default  margintopbom "disabled="disabled">
            <select class="form-control" id="role" name="jiankong" onchange="changePerson();">
                <c:forEach items="${list}" var="kaosheng" varStatus="status">
                    <option value="${kaosheng.user_id}" <c:if test="${examinee.id eq kaosheng.user_id }">selected</c:if>>${kaosheng.extend}</option>
                </c:forEach>
            </select>
        </div>
    </div>
    <div class="form-submit floatrit">
        <div id="toImageBtn" class="btn btn-info margintopbom">
            <span style="color: #FFFFFF">打印准考证 </span> <span class="glyphicon glyphicon-print  lineheightx" style="margin-right:0; color: #FFFFFF"></span>
        </div>
    </div>
</div>
<!--body end-->
<script>
    $(function () {
        //考试管理
        if (${role eq 'master'}) {
            $('#topMain').children().eq(0).addClass('active'); // 追加样式;
            $('#topMain').children().eq(0).children().attr('href', '#');
        } else if (${role eq 'trainee'}) {
            $('#topMain').children().eq(0).addClass('active'); // 追加样式;
            $('#topMain').children().eq(0).children().attr('href', '#');
        } else {
            $('#topMain').children().eq(5).addClass('active'); // 追加样式;
        }

        var str = "${examinee.name}";
        var arr = str.split(',');
        $("#toCanvasBtn").click();
    })
    $(document).ready(function () {
        $(".icob").click(function (event) {
            event.stopPropagation();
            if ($(".bjbtn").css("display") == "none") {
                $(".bjbtn").css("display", "block");
            } else {
                $(".bjbtn").css("display", "none");
            }
        });
    });
    function changePerson() {
        var myForm = document.createElement("form");
        var id = $('#role').val();
        myForm.method = "post";
        myForm.action = '/examsys/exam/printPage';
        var myInput = document.createElement("input");
        myInput.setAttribute("name", "userid");  // 为input对象设置name
        myInput.setAttribute("value", id);  // 为input对象设置value
        myForm.appendChild(myInput);
        var examIdInput = document.createElement("input");
        examIdInput.setAttribute("name", "examId");  // 为input对象设置name
        examIdInput.setAttribute("value", '${examIdInput}');  // 为input对象设置value
        myForm.appendChild(examIdInput);

        document.body.appendChild(myForm);
        myForm.submit();
        document.body.removeChild(myForm);  // 提交后移除创建的form
    }
    $("#toImageBtn").click(function () {
        BootstrapDialog.confirm({
            title : '提示',
            message : '是否确认打印',
            size : BootstrapDialog.SIZE_SMALL,
            type : BootstrapDialog.TYPE_DEFAULT,
            closable : true,
            btnCancelLabel : '取消',
            btnOKLabel : '确认打印',
            callback : function(result) {
                // 点击确定按钮时，result为true
                if (result) {
                    $("#saveImageBtn").trigger("click");
                }
            }
        });
    });
    var paperName = "${paper.title}";
    class CreateImg {
        constructor(domId) {
            this.$container = $('#container'); //需要转换为图片的容器
            this.$toCanvasBtn = $('#toCanvasBtn'); //点击转换容器为画布的元素
            this.$toImageBtn = $('#toImageBtn'); //点击转换画布为图片的元素
            this.$saveImageBtn = $('#saveImageBtn'); //点击转换画布为图片的元素
            this.$saveBox = $('#saveBox'); //点击保存图片的容器
            this.toCanvas(); //初始化
        }

        /* 元素转canvas */
        toCanvas() {
            this.$toCanvasBtn.click(e => {
                html2canvas(this.$container[0]).then(canvas => {
                    this.toImage(canvas);
                });
            });

        }

        /* canvas转图片 */
        toImage(canvas) {
            this.$toImageBtn.click(e => {
                this.saveImage(canvas); //保存图片
            });
        }

        /* 保存图片 */
        saveImage(canvas) {

            this.$saveImageBtn.click(e => {
                let type = "png"; //图片类型
                let w = $("#container").outerWidth(); //图片宽度
                let h = $("#container").outerHeight(true); //图片高度
                let f = paperName; //图片文件名
                Canvas2Image.saveAsImage(canvas, w, h, type, f); //调用Canvas2Image插件
            });
        }
    };
    new CreateImg();
</script>
</body>
</html>
